<header>
  <a href="https://webduino.io" target="_blank"><img class="logo" src="media/logo.png" id="logo"></a>
  <h1>{{title}}</h1>
  <div id="userMenu">

      <a href="index-tutorials.html" target="_blank" id="blockly-to-website"><i class="icon-book"></i> <b>{{userMenuTutorials}}</b></a>
      <a href="https://webduino.io" target="_blank" id="blockly-to-tutorials"><i class="icon-info"></i> <b>{{userMenuWebSite}}</b></a>
      <span><i class="icon-earth"></i> <select id="languageMenu"></select></span>

  </div>
</header>
<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
  </div>
</div>
<table width="100%" height="100%" class="nav">
  <tr>
    <td colspan=2>
      <table width="100%">
        <tr id="tabRow" height="1em">
          <td id="tab_blocks" class="tabon">{{blocks}}</td>
          <td class="tabmin">&nbsp;</td>
          <td id="tab_javascript" class="taboff">JavaScript</td>
          <td id="copyCode" style="display:none;" data-clipboard-target="#content_javascript" data-tooltip="Copy to clipboard" class="toolMenu"><i class="icon-copy"></i></td>
          <td class="tabmin">&nbsp;</td>
          <td class="tabmax">
            <a href="#openModal" id="qrButton" class="linkButton toolMenu"><i class="icon-qrcode"></i> <div>{{qrcodeTooltip}}</div></a>
            <a href="launcher.html" target="_blank" id="linkToBin" class="linkButton toolMenu"><i class="icon-embed2"></i> <div>{{openJsbin}}</div></a>
            <div id="check-device-online" class="toolMenu">
              <input id="input-device" class="">
              <span id="check-btn" class="check-btn">
                <i class="icon-power" id="check-icon"></i> 
              </span> <div>{{checkDeviceOnline}}</div>
            </div>
            <button id="sampleButton" class="notext toolMenu" >
              <i class="icon-box-add"></i> <div>{{sampleTooltip}}</div>
            </button>
            <button id="demoButton" class="notext toolMenu">
              <i class="icon-lab"></i> <div>{{demoTooltip}}</div>
            </button>
            <button id="trashButton" class="notext toolMenu">
              <i class="icon-bin"></i>  <div>{{trashTooltip}}</div>
            </button>
            <button id="linkButton" class="notext toolMenu">
              <i class="icon-link"></i>  <div>{{linkTooltip}}</div>
            </button>
            <button id="runButton" class="notext primary toolMenu">
              <i class="icon-play3"></i>  <div>{{runTooltip}}</div>
            </button>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="99%" colspan=2 id="content_area">
    </td>
  </tr>
</table>

<div id="content_blocks" class="content"></div>
<pre id="content_javascript" class="content"></pre>
<div id="smaple-menu" tabindex="0">
  <div id="smaple-menu-content">
    <h3>{{samples1}}</h3>
    <div data-value="1.1">{{samples1_1}}<i class="icon-plus"></i></div>
    <div data-value="1.2">{{samples1_2}}<i class="icon-plus"></i></div>
    <div data-value="1.3">{{samples1_3}}<i class="icon-plus"></i></div>
    <div data-value="1.4">{{samples1_4}}<i class="icon-plus"></i></div>
    <div data-value="1.5">{{samples1_5}}<i class="icon-plus"></i></div>
    <h3>{{samples2}}</h3>
    <div data-value="2.1">{{samples2_1}}<i class="icon-plus"></i></div>
    <div data-value="2.2">{{samples2_2}}<i class="icon-plus"></i></div>
    <div data-value="2.3">{{samples2_3}}<i class="icon-plus"></i></div>
    <div data-value="2.4">{{samples2_4}}<i class="icon-plus"></i></div>
    <div data-value="2.5">{{samples2_5}}<i class="icon-plus"></i></div>
    <div data-value="2.6">{{samples2_6}}<i class="icon-plus"></i></div>
    <div data-value="2.7">{{samples2_7}}<i class="icon-plus"></i></div>
    <div data-value="2.8">{{samples2_8}}<i class="icon-plus"></i></div>
    <h3>{{samples3}}</h3>
    <div data-value="3.1">{{samples3_1}}<i class="icon-plus"></i></div>
    <div data-value="3.2">{{samples3_2}}<i class="icon-plus"></i></div>
    <h3>{{samples4}}</h3>
    <div data-value="4.1">{{samples4_1}}<i class="icon-plus"></i></div>
    <div data-value="4.2">{{samples4_2}}<i class="icon-plus"></i></div>
    <div data-value="4.3">{{samples4_3}}<i class="icon-plus"></i></div>
    <h3>{{samples5}}</h3>
    <div data-value="5.1">{{samples5_1}}<i class="icon-plus"></i></div>
    <div data-value="5.2">{{samples5_2}}<i class="icon-plus"></i></div>
    <div data-value="5.3">{{samples5_3}}<i class="icon-plus"></i></div>
    <div data-value="5.4">{{samples5_4}}<i class="icon-plus"></i></div>
    <div data-value="5.5">{{samples5_5}}<i class="icon-plus"></i></div>
    <div data-value="5.6">{{samples5_6}}<i class="icon-plus"></i></div>
    <div data-value="5.7">{{samples5_7}}<i class="icon-plus"></i></div>
    <div data-value="5.8">{{samples5_8}}<i class="icon-plus"></i></div>
    <div data-value="5.9">{{samples5_9}}<i class="icon-plus"></i></div>
    <div data-value="5.10">{{samples5_10}}<i class="icon-plus"></i></div>
    <h3>{{samples6}}</h3>
    <div data-value="6.1">{{samples6_1}}<i class="icon-plus"></i></div>
    <div data-value="6.2">{{samples6_2}}<i class="icon-plus"></i></div>
  </div>
</div>
<div id="demo-area">
  <div id="demo-resize-bar"></div>
  <div class="demo-area-content">
    <div class="close-btn"></div>
    <h4>{{demoAreaTitle}}</h4>
    <span>{{demoAreaChoose}}</span>
    <select id="demo-select">
      <option value="1">{{demoAreaSelect1}}</option>
      <option value="2">{{demoAreaSelect2}}</option>
      <option value="3">{{demoAreaSelect3}}</option>
      <option value="4">{{demoAreaSelect4}}</option>
      <option value="5">{{demoAreaSelect5}}</option>
      <option value="6">{{demoAreaSelect6}}</option>
      <option value="7">{{demoAreaSelect7}}</option>
      <option value="8">{{demoAreaSelect8}}</option>
      <option value="9">{{demoAreaSelect9}}</option>
    </select>
  </div>
</div>
<textarea id="content_xml" class="content" wrap="off"></textarea>
